<template>
  <div class="">
    <h3>首页</h3>
    <!-- 路径别名引入图片 -->
    <img src="~img/alias.png" class="mt-20" style="width: 200px;">
    <p v-zl1:global-zl1 class="mt-20">全局指令1</p>
    <p v-zl2:global-zl2 class="mt-20">全局指令2</p>
  </div>
</template>

<script setup>
// 在页面中定制 head
useHead({
  title: '首页',
  meta: [
    { name: 'description', content: '首页自定义' },
    { hid: 'abc', name: 'description', content: 'hid-覆盖' },
  ]
})
// 使用 composables 的全局函数
const bool = useBool(10)
console.log('🎨 全局函数 useBool >>> ', bool)

onMounted(() => {
  // 使用 plugins 自动提供的辅助函数
  const { $say, $hello } = useNuxtApp()
  $say(13579)
  $hello(24680)
})
</script>

<style lang="scss" scoped></style>